<template>
	<!-- 静态族谱树 -->
	<view class="showtree">
		<view class="ul">
			<view class="li" :id="'showtree'+item.id" v-for="(item,index) in showData" :key="index">
				<view class="item" :class="{'line-left':index!==0,'line-right':index!=showData.length-1}">
					<view class="item-name"
						:class="{'line-bottom':item.childlist&&item.childlist.length>0,'line-top':!treeFirst,'spouseborder':item.mate.length,'alone':!item.mate.length}">
						<!-- spouseborder 代表有配偶 -->
						<view class="flex ali-c">
							<view>	
								<view class="member">{{item.name}}</view>
							</view>
							
							<!-- 配偶 -->
							<view v-if="item.mate.length">
								<view class="flex">
									<view v-for="(items,indexs) in item.mate" :key="indexs">
										<view class="wifeview">																				
											<view class="member">{{items.name}}</view>													
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<showtree  v-if="item.childlist&&item.childlist.length>0" :showData="item.childlist" />
			</view>
		</view>
	</view>
</template>

<script>
	import showtree from '@/components/showtree/showtree.vue';
	import {
		familyTreeList
	} from "@/utils/api/zupu.js";

	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {
			showtree
		},
		name: 'showtree',
		props: {
			family_id: {
				type: Number | String,
				default: "",
			},
			subscript: { //下标
				type: Array,
				default: () => []
			},
			level: {
				type: Number,
				default: 1,
			},
			showData: {
				type: Array,
				default: () => []
			},
			treeFirst: { //判断是否第一个
				type: Boolean,
				default: false
			},
		},
		
		data() {
			return {
				
			}
		},
		created() {

		},
		methods: {
			...mapMutations(['updateTreedataItem']),
			...mapActions(['showTree', 'familyTreeListfun', 'ModifyItemDataTop', 'ModifyItemData']),
		}
	}
</script>

<style lang="scss" scoped>
	$line-length: 40rpx; //线长
	$spacing: 40rpx; //间距
	$extend: calc(#{$spacing} + 2px); //延长线

	// 线样式
	@mixin line {
		content: "";
		display: block;
		width: 3rpx;
		height: $line-length;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		background: $themecolor;
	}

	// 加减号icon
	@mixin icon {
		position: absolute;
		border: solid 2rpx #666;
		border-radius: 100%;
		bottom: -10rpx;
		width: 24rpx;
		height: 24rpx;
		line-height: 20rpx;
		text-align: center;
		color: #666;
		z-index: 100;
		cursor: pointer;
		margin: 0;
		padding: 0;
		// opacity: 0;
	}

	.showtree {
		.ul {		
			display: flex;
			margin: 0 10rpx;
			.li {
				
				.item {
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;
					&-name {
						min-width: 54rpx;
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						min-height: 70rpx;
						margin: $spacing 0rpx;
						font-weight: 800;
						font-size: 26rpx;

						& .wifeview {
							margin-left: 4rpx;
						}						
						.member {
							width: 30rpx;
						}
					}
					.alone{
						width: 62rpx;
					}
				}
			}
		}

		// 向下的线
		.line-bottom {
			&::after {
				@include line();
				bottom: -$line-length;
			}
		}

		// 向上的线
		.line-top {
			&::before {
				@include line();
				top: -$line-length;
			}
		}

		// 向左的线
		.line-left {
			margin: 0 10rpx;

			&::after {
				@include line();
				width: calc(50% + #{$spacing});
				height: 3rpx;
				left: calc(-50% - #{$extend});
				top: 0;
			}
		}

		// 向右的线
		.line-right {
			margin: 0 10rpx;
			&::before {
				@include line();
				width: calc(50% + #{$spacing});
				height: 3rpx;
				right: calc(-50% - #{$extend});
				top: 0;
			}
		}
	}
</style>